<template>

  <!-- 用户导入对话框 -->
  <el-dialog class="dia-style" title="导入" :visible.sync="open" :close-on-click-modal="false" @close="cancel">
    <el-upload
      ref="upload"
      :limit="upload.limit"
      :accept="upload.accept"
      :headers="headers"
      :action="upload.url"
      :disabled="isUploading"
      :on-change="handleFileUploadProgress"
      :on-success="handleFileSuccess"
      :auto-upload="false"
      drag
    >
      <i class="el-icon-upload" />
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div><span>支持扩展名：{{ upload.accept }}</span></div>
    </el-upload>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFileForm">保 存</el-button>
      <el-button @click="open = false">取 消</el-button>
    </div>
  </el-dialog>

</template>

<script>
import { getToken } from '@/utils/auth'
import axios from 'axios'

export default {
  props: {
    upload: {
      type: Object,
      default() {
        return {
          // 上传的地址
          url: window.baseUrl.icp + '/rule/importFile',
          //  params
          params: 'importZip',
          accept: '.bpmn',
          limit: '1'
        }
      }
    }
  },
  data() {
    return {
      ids: [],
      fileList: [],
      // 设置上传的请求头部
      headers: { Authorization: 'Bearer ' + getToken() },
      // 用户导入参数
      // 是否显示弹出层（用户导入）
      open: false,
      // 是否禁用上传
      isUploading: false
    }
  },
  methods: {
  // 文件上传中处理
    handleFileUploadProgress(file, fileList) {
      this.fileList = []
      fileList.forEach(item => {
        this.fileList.push({
          [this.upload.params]: item.raw
        })
      })
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.open = false
      this.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        response.msg +
        '</div>',
        '导入结果',
        { dangerouslyUseHTMLString: true }
      )
    },
    // 提交上传文件
    submitFileForm() {
      const form = new FormData()
      this.fileList.forEach((item, key) => {
        form.append(this.upload.params + '', item[this.upload.params])
      })
      axios({
        method: 'post',
        url: this.upload.url,
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        transformRequest: [
          function() {
            return form
          }
        ],
        params: form
      }).then((res) => {
        if (this.upload.accept === '.xlsx') {
          console.log(res)
          if (res.data.code == 200) {
            this.open = false
            this.$emit('handleSubmit')
            this.$modal.msgSuccess('导入成功')
          } else {
            this.open = false
            this.$emit('handleSubmit')
            this.$message.warning(res.data.msg)
          }
        }
      })
    },
    //   取消
    cancel() {
      this.open = false
      this.$refs.upload.clearFiles()
    }
  }
}
</script>

<style lang="scss" scoped>

::v-deep {.el-dialog{
  width:600px !important;
}
.el-upload-dragger {
  width: 550px;
}
.el-dialog__body {
  //max-height: 400px;
  display: flex;
  flex-direction: column;
  text-align: center;
  div {
    .targetTable {
      margin-top: -20px;
      margin-bottom: -20px;
    }
  }
}
}
</style>
